import { Card, Col, Row, Tabs } from 'antd';
import React from 'react';
import { Bar } from './Charts';
import styles from '../style.less';
import moment from 'moment'
const { TabPane } = Tabs;
const rankingListData = [];

for (let i = 0; i < 7; i += 1) {
  rankingListData.push({
    title: `工专路 ${i} 号店`,
    total: 323234,
  });
}

const MemberTrendCard = ({
  newMemberData,
  expireMemberData,
  isActive,
  loading,
  selectDate,
  rangePickerValue,
  rangePickerType
}) => {
  let _newMemberData=[]
  let _expireMemberData=[]
  if(rangePickerType=='week'){
    const start = moment().weekday(0).format('YYYY-MM-DD'); //本周一
    let _rangePickerValue=[]
    for(let i=0;i<=6;i++){
      if(i==0){
        _rangePickerValue.push(start)
      }else{
        let nextDay=moment(start).add(i,'d').format('YYYY-MM-DD');
        _rangePickerValue.push(nextDay)
      }
    }
    if(Array.isArray(newMemberData)){
      _rangePickerValue.map((item,index)=>{
        _newMemberData.push({
          x:item,
          y:newMemberData[index]
        })
      })
    }
    if(Array.isArray(expireMemberData)){
      _rangePickerValue.map((item,index)=>{
        _expireMemberData.push({
          x:item,
          y:expireMemberData[index]
        })
      })
    }
  }else if(rangePickerType=='month'){
    let startMonth = moment().startOf('month').format('YYYY-MM');
    let start = moment().startOf('month').format('YYYY-MM-DD');
    let number=moment(startMonth, "YYYY-MM").daysInMonth();
    let _rangePickerValue=[]
    for(let i=0;i<number;i++){
      if(i==0){
        _rangePickerValue.push(start)
      }else{
        let nextDay=moment(start).add(i,'d').format('YYYY-MM-DD');
        _rangePickerValue.push(nextDay)
      }
    }
    if(Array.isArray(newMemberData)){
      _rangePickerValue.map((item,index)=>{
        _newMemberData.push({
          x:item,
          y:newMemberData[index]
        })
      })
    }
    if(Array.isArray(expireMemberData)){
      _rangePickerValue.map((item,index)=>{
        _expireMemberData.push({
          x:item,
          y:expireMemberData[index]
        })
      })
    }
  }else if(rangePickerType=='year'){
    let start = moment().startOf('year').format('YYYY-MM')
    let _rangePickerValue=[]
    for(let i=0;i<12;i++){
      if(i==0){
        _rangePickerValue.push(start)
      }else{
        let nextDay=moment(start).add(i,'M').format('YYYY-MM');
        _rangePickerValue.push(nextDay)
      }
    }
    if(Array.isArray(newMemberData)){
      _rangePickerValue.map((item,index)=>{
        _newMemberData.push({
          x:item,
          y:newMemberData[index]
        })
      })
    }
    if(Array.isArray(expireMemberData)){
      _rangePickerValue.map((item,index)=>{
        _expireMemberData.push({
          x:item,
          y:expireMemberData[index]
        })
      })
    }
  }
  
return <Card
  loading={loading}
  bordered={false}
  bodyStyle={{
    padding: 0,
  }}
>
  <div className={styles.salesCard}>
    <Tabs
      tabBarExtraContent={
        <div className={styles.salesExtraWrap}>
          <div className={styles.salesExtra}>
            <a className={isActive('week')} onClick={() => selectDate('week')}>
             本周
            </a>
            <a className={isActive('month')} onClick={() => selectDate('month')}>
              本月
            </a>
            <a className={isActive('year')} onClick={() => selectDate('year')}>
             全年
            </a>
          </div>
        </div>
      }
      size="large"
      tabBarStyle={{
        marginBottom: 24,
        marginLeft:16
      }}
    >
      <TabPane
        tab={<span>新增会员</span>}
        key="sales"
      >
        <Row>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}>
            <div className={styles.salesBar}>
              <Bar
                height={295}
                title="新增趋势"
                data={_newMemberData}
              />
            </div>
          </Col>
        </Row>
      </TabPane>
      <TabPane
        tab="失效会员数"
        key="views"
      >
        <Row>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}>
            <div className={styles.salesBar}>
              <Bar
                height={292}
                title="趋势"
                data={_expireMemberData}
              />
            </div>
          </Col>
        </Row>
      </TabPane>
    </Tabs>
  </div>
</Card>
};

export default MemberTrendCard;
